<template>
    <div class="so">
        <h2>{{title1}}</h2>
        <input type="button" @click="btn('1_1')" :value="choice1_1" :style="btnstyle1_1">
        <input type="button" @click="btn('1_2')" :value="choice1_2" :style="btnstyle1_2">
        <input type="button" @click="btn('1_3')" :value="choice1_3" :style="btnstyle1_3">
        <h2>{{title2}}</h2>
        <input type="button" @click="btn('2_1')" :value="choice2_1" :style="btnstyle2_1">
        <input type="button" @click="btn('2_2')" :value="choice2_2" :style="btnstyle2_2">
        <input type="button" @click="btn('2_3')" :value="choice2_3" :style="btnstyle2_3">
        <h2>{{title3}}</h2>
        <input type="button" @click="btn('3_1')" :value="choice3_1" :style="btnstyle3_1">
        <input type="button" @click="btn('3_2')" :value="choice3_2" :style="btnstyle3_2">
        <input type="button" @click="btn('3_3')" :value="choice3_3" :style="btnstyle3_3">
    </div>
</template>
<script>
export default {
  name: 'SpecialOptions',
  props: {
    addid: String
  },
  data () {
    return {
      btnstyle1_1: '',
      btnstyle1_2: '',
      btnstyle1_3: '',
      btnstyle2_1: '',
      btnstyle2_2: '',
      btnstyle2_3: '',
      btnstyle3_1: '',
      btnstyle3_2: '',
      btnstyle3_3: ''
    }
  },
  mounted: function () {
    this.load()
  },
  computed: {
    title1 () {
      return this.$store.state.adds[this.addid].add1
    },
    choice1_1 () {
      return this.$store.state.adds[this.addid].add1_1
    },
    choice1_2 () {
      return this.$store.state.adds[this.addid].add1_2
    },
    choice1_3 () {
      return this.$store.state.adds[this.addid].add1_3
    },
    title2 () {
      return this.$store.state.adds[this.addid].add2
    },
    choice2_1 () {
      return this.$store.state.adds[this.addid].add2_1
    },
    choice2_2 () {
      return this.$store.state.adds[this.addid].add2_2
    },
    choice2_3 () {
      return this.$store.state.adds[this.addid].add2_3
    },
    title3 () {
      return this.$store.state.adds[this.addid].add3
    },
    choice3_1 () {
      return this.$store.state.adds[this.addid].add3_1
    },
    choice3_2 () {
      return this.$store.state.adds[this.addid].add3_2
    },
    choice3_3 () {
      return this.$store.state.adds[this.addid].add3_3
    }
  },
  methods: {
    load: function () {
      if (this.$store.state.add1 === '' && this.$store.state.add2 === '' && this.$store.state.add3 === '') {
        this.btnstyle1_1 = ''
        this.btnstyle1_2 = ''
        this.btnstyle1_3 = ''
        this.btnstyle2_1 = ''
        this.btnstyle2_2 = ''
        this.btnstyle2_3 = ''
        this.btnstyle3_1 = ''
        this.btnstyle3_2 = ''
        this.btnstyle3_3 = ''
      }
    },
    btn: function (value) {
      var btnstyleselect = 'background: orange;color: white;'
      console.log(value)
      switch (value) {
        case '1_1':
          this.btnstyle1_1 = btnstyleselect
          this.btnstyle1_2 = ''
          this.btnstyle1_3 = ''
          this.$store.commit('SETADD1', this.choice1_1)
          break
        case '1_2':
          this.btnstyle1_1 = ''
          this.btnstyle1_2 = btnstyleselect
          this.btnstyle1_3 = ''
          this.$store.commit('SETADD1', this.choice1_2)
          break
        case '1_3':
          this.btnstyle1_1 = ''
          this.btnstyle1_3 = btnstyleselect
          this.btnstyle1_2 = ''
          this.$store.commit('SETADD1', this.choice1_3)
          break
        case '2_1':
          this.btnstyle2_1 = btnstyleselect
          this.btnstyle2_2 = ''
          this.btnstyle2_3 = ''
          this.$store.commit('SETADD2', this.choice2_1)
          break
        case '2_2':
          this.btnstyle2_1 = ''
          this.btnstyle2_2 = btnstyleselect
          this.btnstyle2_3 = ''
          this.$store.commit('SETADD2', this.choice2_2)
          break
        case '2_3':
          this.btnstyle2_1 = ''
          this.btnstyle2_3 = btnstyleselect
          this.btnstyle2_2 = ''
          this.$store.commit('SETADD2', this.choice2_3)
          break
        case '3_1':
          this.btnstyle3_1 = btnstyleselect
          this.btnstyle3_2 = ''
          this.btnstyle3_3 = ''
          this.$store.commit('SETADD3', this.choice3_1)
          break
        case '3_2':
          this.btnstyle3_1 = ''
          this.btnstyle3_2 = btnstyleselect
          this.btnstyle3_3 = ''
          this.$store.commit('SETADD3', this.choice3_2)
          break
        case '3_3':
          this.btnstyle3_1 = ''
          this.btnstyle3_3 = btnstyleselect
          this.btnstyle3_2 = ''
          this.$store.commit('SETADD3', this.choice3_3)
          break
        default:
          console.log('switch未生效')
      }
    }
  }
}
</script>
<style scoped lang="less">
h2{
    font-size: 20px;
    margin-top: 8px;
    margin-left: 5px;
    margin-bottom: 10px;
}
.so{
    margin-left: 1px;
}
.so input{
    width: 100px;
    height: 3.5vh;
    margin-left: 12px;
    margin-top:-15px;
    background: white;
    border: 1px solid grey;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
}
// .so input:focus{
//     background: orange;
//     color: white;
// }
</style>
